{% extends "base.html" %}

{% block title %}文档上传 - Docling 文档识别应用{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <!-- 应用介绍 -->
        <div class="card mb-4">
            <div class="card-body text-center">
                <h1 class="card-title">
                    <i class="fas fa-file-upload text-primary me-2"></i>
                    Docling 文档识别应用
                </h1>
                <p class="card-text text-muted">
                    上传您的文档，使用先进的AI技术将其转换为结构化数据
                </p>
                <div class="row text-center mt-3">
                    <div class="col-md-4">
                        <i class="fas fa-file-pdf fa-2x text-danger mb-2"></i>
                        <p class="small">支持PDF</p>
                    </div>
                    <div class="col-md-4">
                        <i class="fas fa-file-word fa-2x text-primary mb-2"></i>
                        <p class="small">支持DOCX/PPTX</p>
                    </div>
                    <div class="col-md-4">
                        <i class="fas fa-image fa-2x text-success mb-2"></i>
                        <p class="small">支持图片</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 文件上传表单 -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-upload me-2"></i>
                    上传文档
                </h5>
            </div>
            <div class="card-body">
                <form id="uploadForm" enctype="multipart/form-data">
                    <!-- 文件选择 -->
                    <div class="mb-3">
                        <label for="fileInput" class="form-label">选择文档文件</label>
                        <input type="file" class="form-control" id="fileInput" name="file" 
                               accept=".pdf,.docx,.pptx,.xlsx,.html,.htm,.md,.txt,.png,.jpg,.jpeg,.tiff,.bmp,.gif,.webp"
                               required>
                        <div class="form-text">
                            支持的格式：PDF, DOCX, PPTX, XLSX, HTML, 图片等 (最大100MB)
                        </div>
                    </div>

                    <!-- 输出格式选择 -->
                    <div class="mb-3">
                        <label class="form-label">输出格式</label>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="output_formats" 
                                           value="markdown" id="formatMarkdown" checked>
                                    <label class="form-check-label" for="formatMarkdown">
                                        <i class="fab fa-markdown me-1"></i>Markdown
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="output_formats" 
                                           value="json" id="formatJson">
                                    <label class="form-check-label" for="formatJson">
                                        <i class="fas fa-code me-1"></i>JSON
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="output_formats" 
                                           value="html" id="formatHtml">
                                    <label class="form-check-label" for="formatHtml">
                                        <i class="fab fa-html5 me-1"></i>HTML
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 处理选项 -->
                    <div class="mb-3">
                        <label for="maxPages" class="form-label">最大处理页数</label>
                        <input type="number" class="form-control" id="maxPages" name="max_pages" 
                               value="50" min="1" max="200">
                        <div class="form-text">
                            限制处理的页数以控制处理时间
                        </div>
                    </div>

                    <!-- 提交按钮 -->
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg" id="submitBtn">
                            <i class="fas fa-magic me-2"></i>
                            开始处理文档
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 处理进度 -->
        <div id="progressCard" class="card mt-4" style="display: none;">
            <div class="card-body">
                <h6 class="card-title">
                    <i class="fas fa-cog fa-spin me-2"></i>
                    正在处理文档...
                </h6>
                <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" 
                         role="progressbar" style="width: 100%"></div>
                </div>
                <p class="text-muted mt-2 mb-0">
                    请稍候，这可能需要几分钟时间...
                </p>
            </div>
        </div>

        <!-- 结果显示 -->
        <div id="resultCard" class="card mt-4" style="display: none;">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-check-circle text-success me-2"></i>
                    处理结果
                </h5>
            </div>
            <div class="card-body" id="resultContent">
                <!-- 结果内容将在这里显示 -->
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.getElementById('uploadForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const submitBtn = document.getElementById('submitBtn');
    const progressCard = document.getElementById('progressCard');
    const resultCard = document.getElementById('resultCard');
    
    // 显示进度
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>处理中...';
    progressCard.style.display = 'block';
    resultCard.style.display = 'none';
    
    // 发送请求
    fetch('/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        progressCard.style.display = 'none';
        
        if (data.success) {
            showResult(data.result, data.filename);
        } else {
            showError(data.error);
        }
    })
    .catch(error => {
        progressCard.style.display = 'none';
        showError('网络错误: ' + error.message);
    })
    .finally(() => {
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<i class="fas fa-magic me-2"></i>开始处理文档';
    });
});

function showResult(result, filename) {
    const resultCard = document.getElementById('resultCard');
    const resultContent = document.getElementById('resultContent');
    
    let html = `<h6>文件: ${filename}</h6>`;
    
    for (const [format, content] of Object.entries(result)) {
        html += `
            <div class="mb-3">
                <h6>${format.toUpperCase()}</h6>
                <div class="border p-3 bg-light">
                    <pre class="mb-0" style="max-height: 300px; overflow-y: auto;">${escapeHtml(content)}</pre>
                </div>
                <button class="btn btn-sm btn-outline-primary mt-2" onclick="downloadResult('${format}', '${filename}')">
                    <i class="fas fa-download me-1"></i>下载 ${format.toUpperCase()}
                </button>
            </div>
        `;
    }
    
    resultContent.innerHTML = html;
    resultCard.style.display = 'block';
}

function showError(message) {
    const resultCard = document.getElementById('resultCard');
    const resultContent = document.getElementById('resultContent');
    
    resultContent.innerHTML = `
        <div class="alert alert-danger">
            <i class="fas fa-exclamation-triangle me-2"></i>
            ${message}
        </div>
    `;
    resultCard.style.display = 'block';
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function downloadResult(format, filename) {
    // 这里可以实现下载功能
    alert(`下载 ${format} 格式的结果 (功能待实现)`);
}
</script>
{% endblock %}
